<template>
  <a-drawer
    :title="title"
    placement="right"
    :closable="true"
    :width="width"
    :visible="visible"
    @close="handleCancel"
    destroyOnClose
  >
    <a-spin :spinning="confirmLoading">
      <j-form-container>
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="账户类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="accountType">
                <a-select default-value="1" style="width: 100%" @change="changeAccountType">
                  <a-select-option value="1">银行</a-select-option>
                  <a-select-option value="2">现金</a-select-option>
                  <a-select-option value="3">第三方</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="账户名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="accountName">
                <a-input v-model="model.accountName" placeholder="请输入账户名称" style="width: 100%"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="24" v-if="isShowBankInfo">
              <a-form-model-item label="开户银行" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bankInfo">
                <a-input v-model="model.bankInfo" placeholder="请输入开户银行" style="width: 100%"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="卡号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cardNo">
                <a-input-number v-model="model.cardNo" placeholder="请输入卡号" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="会计科目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="accountingSubject">
                <a-input v-model="model.accountingSubject" placeholder="请输入会计科目" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="初始金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="initialMoney">
                <a-input-number v-model="model.initialMoney" placeholder="请输入初始金额" style="width: 100%"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
                <a-textarea v-model="model.remark" placeholder="请输入备注" :auto-size="{ minRows: 3, maxRows: 5 }" style="width: 100%" />
              </a-form-model-item>
            </a-col>

          </a-row>
        </a-form-model>
      </j-form-container>
    </a-spin>
    <a-button type="primary" @click="handleOk" style="width: 100%;">保存</a-button>
  </a-drawer>

  <!--<j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">



  </j-modal>-->

</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import {validateDuplicateValue} from "../../../../../utils/util";
  import Vue from "vue";

  export default {
    name: 'addAccountModal',
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        title:'',
        width:'100%',
        visible: false,
        disableSubmit: false,
        isShowBankInfo: true,
        currentAccountType: 1,
        model:{
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          /*accountType: [{ required: true, message: '账户类型不能为空' }],*/
          cardNo:[
            {"pattern": /^[0-9]*$/,"message": "只能输入正整数"}
          ],
          accountName: [{ required: true, message: '账户名称不能为空' }],
          accountingSubject: [{ required: true, message: '会计科目不能为空' }],
          initialMoney: [
            { required: true, message: '初始金额不能为空' },
            {"pattern": /^\d+(?=\.{0,1}\d+$|$)/,"message": "只能输入正数"}
          ],
        },
        url: {
          add: "/ghFinanceAccount/add",
        }
      }
    },
    created() {

    },
    methods: {
      changeAccountType(value){
        this.currentAccountType = value;
        if (value == 1){
          this.isShowBankInfo = true;
        }else {
          this.isShowBankInfo = false;
        }
      },
      add () {
        this.visible = true;
      },
      edit(record){
        this.visible = true;
        this.model = Object.assign({}, record);
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = this.url.add;
            let method = 'post';
            if (this.currentAccountType == 0){
              this.model.accountType = 1;
            }else {
              this.model.accountType = this.currentAccountType;
            }
            if (this.model.initialMoney != null){
              this.model.surplus = this.model.initialMoney;
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              this.close();
            })
          }

        })
      },
      submitCallback(){
        this.$emit('ok');
        this.visible = false;
      },
      handleCancel () {
        this.close()
      },
    }
  }
</script>